<!DOCTYPE html>
<!--王艳辉-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>老师带班数据</title>
    <link rel="stylesheet" type="text/css" href="plugin/layui/css/layui.css"/>
    <script src="plugin/layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>

<!-- 班主任信息表格 -->
<table id="workdata" lay-filter="workdata"></table>

<!--柱状图-->
<div class="layui-card">
    <!--    <div class="layui-card-header">柱形图</div>-->
    <div class="layui-card-body">
        <div id="EchartZhu" style="width: 500px;height: 500px;"></div>
    </div>
</div>
<!--菜单栏-->
<script type="text/html" id="opr">
    <a class="layui-btn layui-btn-danger" lay-event="detail">查看详情</a>
</script>

<script>
    //Echart 作为layui的内部组件使用 需要配置 配置后才可以使用
    layui.extend({
        echarts: '../echarts' //这个就是你放Echart.js的目录
    }).use(['element', 'echarts', 'table', 'jquery', 'layer'], function () {

        var element = layui.element,
            $ = layui.jquery,
            echarts = layui.echarts;
        var table = layui.table;
        var layer = layui.layer;

        /*表格渲染*/
        table.render({
            elem: '#workdata',
            height: 312,
            url: '/ForemanInfoDto/getAll' //数据接口
            ,
            page: true //开启分页
            ,
            limit: 5, //默认显示5条
            limits: [5, 10],
            cols: [
                [
                    {
                        field: 'tcId',
                        title: '老师编号',
                        width: 120,
                        sort: true,
                    },
                    {
                        field: 'name',
                        title: '老师姓名',
                        width: 120,
                    },
                    {
                        field: 'tel',
                        title: '老师电话',
                        width: 120,
                    },
                    {
                        field: 'classname',
                        title: '所带班级',
                        width: 120,
                        templet: function (d) {

                            if (d.teamInfos.length > 0) {
                                var res = "";
                                for (var i = 0; i < d.teamInfos.length; i++) {
                                    res += d.teamInfos[i].tname + "--"
                                }
                                return res;
                            }
                            return "暂无带班信息";
                        }
                    },
                    {
                        toolbar: '#opr', title: '操作',
                        width: 180
                    },

                ]]
        });

        table.on('tool(workdata)', function (obj) {
            layer.msg("点击了查看详情！");
            let data = obj.data;


            /*设置json对象*/

            var newdata = {//系列
                name: '销量',
                type: 'bar', //类型柱状
                data: [],
                itemStyle: {
                    normal: { //柱子颜色
                        color: 'red'
                    }
                },
            };
            let teamlist = [];//班级数组
            let serieslist = [];//系列数组

            if (data.teamInfos.length > 0) {
                /*获取第一个班级的信息*/
                if (data.teamInfos[0].studentInfos.length > 0) {

                   // teamlist.push(data.teamInfos[0].tname);//班级名
                    console.info(teamlist);
                    /*获取x轴*/
                    for (var j = 0; j < data.teamInfos[0].studentInfos.length; j++) {
                        newdata = {//系列
                            name: '销量',
                            type: 'bar', //类型柱状
                            data: [],
                            itemStyle: {
                                normal: { //柱子颜色
                                    color: function(params) {
                                        // build a color map as your need.
                                        var colorList = [
                                            '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                                            '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                            '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                                        ];
                                        return colorList[params.dataIndex]
                                    },
                                }
                            }
                        };//重置
                        newdata["name"] = data.teamInfos[0].studentInfos[j].sname;

                        newdata["data"].push(data.teamInfos[0].studentInfos[j].studentScores[0].chinesescore == null ? 0 : data.teamInfos[0].studentInfos[j].studentScores[0].chinesescore);
                        newdata["data"].push(data.teamInfos[0].studentInfos[j].studentScores[0].mathscore == null ? 0 : data.teamInfos[0].studentInfos[j].studentScores[0].mathscore);
                        newdata["data"].push(data.teamInfos[0].studentInfos[j].studentScores[0].englishscore == null ? 0 : data.teamInfos[0].studentInfos[j].studentScores[0].englishscore);
                        newdata["data"].push(data.teamInfos[0].studentInfos[j].studentScores[0].physicsscore == null ? 0 : data.teamInfos[0].studentInfos[j].studentScores[0].physicsscore);
                        newdata["data"].push(data.teamInfos[0].studentInfos[j].studentScores[0].biologyscore == null ? 0 : data.teamInfos[0].studentInfos[j].studentScores[0].biologyscore);
                        newdata["data"].push(data.teamInfos[0].studentInfos[j].studentScores[0].chemistryscore = null ? 0 : data.teamInfos[0].studentInfos[j].studentScores[0].chemistryscore);
                        newdata["data"].push(data.teamInfos[0].studentInfos[j].studentScores[0].historyscore == null ? 0 : data.teamInfos[0].studentInfos[j].studentScores[0].historyscore);
                        newdata["data"].push(data.teamInfos[0].studentInfos[j].studentScores[0].geographyscore == null ? 0 : data.teamInfos[0].studentInfos[j].studentScores[0].geographyscore);
                        newdata["data"].push(data.teamInfos[0].studentInfos[j].studentScores[0].politicsscore == null ? 0 : data.teamInfos[0].studentInfos[j].studentScores[0].politicsscore);
                        console.info(newdata);
                        serieslist.push(newdata);
                        teamlist.push(data.teamInfos[0].studentInfos[j].sname);

                    }

                }
                console.info(serieslist);
                //指定图表配置项和数据
                var optionchart = {
                    title: { //标题
                        text: '班级信息'
                    },
                    tooltip: {},
                    legend: { //图例
                        data: teamlist
                    },
                    xAxis: { //x轴
                        data: ['语文', '数学', '英语', '物理', '生物', '化学', '历史', '地理', '政治']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: serieslist
                };


                chartZhu.setOption(optionchart, true);

                /*遍历班级表*/
                // for (var i = 0; i < data.teamInfos.length; i++) {
                //
                //     /*如果存在学生信息*/
                //     if (data.teamInfos[i].studentInfos.length>0){
                //         //数组设置班级名
                //         teamlist.push(data.teamInfos[i].tname);
                //
                //
                //
                //         console.info(teamlist);//显示修改后的数据在控制台
                //
                //         /*遍历学生信息*/
                //         for (var j=0;j<data.teamInfos[i].studentInfos.length;j++){
                //         /*设置班级信息数组的json对象的值*/
                //             newdata["name"]=data.teamInfos[i].studentInfos[j].sname;//设置学生名字
                //             newdata["data"].push(150);
                //         }
                //         //显示数据
                //         console.info(newdata);
                //     }
                //
                // }
            }


        })

        var chartZhu = echarts.init(document.getElementById('EchartZhu'));


        var optionchartZhe = {
            title: {
                text: '商品订单'
            },
            tooltip: {},
            legend: { //顶部显示 与series中的数据类型的name一致
                data: ['销量', '产量', '营业额', '单价']
            },
            xAxis: {
                // type: 'category',
                // boundaryGap: false, //从起点开始
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: '销量',
                type: 'line', //线性
                data: [145, 230, 701, 734, 1090, 1130, 1120],
            }, {
                name: '产量',
                type: 'line', //线性
                data: [720, 832, 801, 834, 1190, 1230, 1220],
            }, {
                smooth: true, //曲线 默认折线
                name: '营业额',
                type: 'line', //线性
                data: [820, 932, 901, 934, 1290, 1330, 1320],
            }, {
                smooth: true, //曲线
                name: '单价',
                type: 'line', //线性
                data: [220, 332, 401, 534, 690, 730, 820],
            }]
        };

        var optionchartBing = {
            title: {
                text: '商品订单',
                subtext: '纯属虚构', //副标题
                x: 'center' //标题居中
            },
            tooltip: {
                // trigger: 'item' //悬浮显示对比
            },
            legend: {
                orient: 'vertical', //类型垂直,默认水平
                left: 'left', //类型区分在左 默认居中
                data: ['单价', '总价', '销量', '产量']
            },
            series: [{
                type: 'pie', //饼状
                radius: '60%', //圆的大小
                center: ['50%', '50%'], //居中
                data: [{
                    value: 335,
                    name: '单价'
                },
                    {
                        value: 310,
                        name: '总价'
                    },
                    {
                        value: 234,
                        name: '销量'
                    },
                    {
                        value: 135,
                        name: '产量'
                    }
                ]
            }]
        };

        //chartZhu.setOption(optionchart, true);
        //chartZhu.setOption(optionchartBing, true);
        //chartZhu.setOption(optionchartZhe, true);

    });


</script>
</body>
</html>